<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="renderer" content="webkit">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>稻草FAQ注册</title>
  <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="bower_components/plugins/css/vueAlert.css">
  <link rel="stylesheet" href="css/login.css">
  <script src="bower_components/jquery/dist/jquery.min.js" ></script>
  <script src="bower_components/bootstrap/dist/js/bootstrap.min.js" ></script>
  <script src="bower_components/vue/dist/vue.js"></script>
</head>
<body class="bg-light">

<div class="container-fluid">
  <div class="row">
    <div class="mx-auto mt-5" style="width: 400px">
      <div class="alsrtInfo" style="display: none">
        <div class="profPrompt_test" ></div>
      </div>
      <h2 class="text-center">稻草问答系统</h2>
      <div class="bg-white p-4" id="app">

        <p class="text-center"><b>注册新用户</b></p>

        <div id="error" class="alert alert-danger" style="display: none" v-bind:class="{'d-block':hasError}">
          <i class="fa fa-exclamation-triangle"></i> <span v-text="errorMessage">邀请码错误！</span>
        </div>

        <form v-on:submit.prevent="register">
          <div class="form-group has-icon">
            <input type="text" name="inviteCode" class="form-control" placeholder="请输入邀请码"
               required="required" v-model="InviteCode">
            <span class="fa fa-barcode form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="tel" name="phone" class="form-control" placeholder="请输入手机号"
              pattern="^\d{11}$" required="required" v-model="phone">
            <span class=" fa fa-phone form-control-icon"></span>
          </div>

          <div class="form-group has-icon">
            <input type="text" name="nickname" class="form-control" placeholder="请设置昵称，字数为2-20之间"
               pattern="^.{2,20}$" required="required" v-model="nickname">
            <span class="fa fa-user form-control-icon"></span>
          </div>

          <div class="form-group has-icon">
            <input type="password" name="password" class="form-control" placeholder="设置密码6-20个字母、数字、下划线"
               required="required" pattern="^\w{6,20}$"  v-model="password">
            <span class="fa fa-lock form-control-icon"></span>
          </div>
          <div class="form-group has-icon">
            <input type="password" name="confirm" class="form-control" placeholder="请再次输入密码"
                    required="required" v-model="confirmPassword">
            <span class="fa fa-lock form-control-icon"></span>
          </div>
          <button type="submit" class="btn btn-primary btn-block btn-flat" >注册</button>
        </form>

        <a href="login.html" class="text-center d-inline-block mt-3">已有账号，立即登录</a>
      </div>
      <!-- /.form-box -->
    </div>
  </div>
</div>
<script>
  //创建Vue对象，构造方法的参数是一个JSON对象
  let app = new Vue({
    el:'#app',
    data:{
      InviteCode: null,
      phone: null,
      nickname: null,
      password: null,
      confirmPassword: null,
      hasError: false,
      errorMessage: null
    },
    methods:{
        register: function () {
            // alert("准备注册！");
            app.hasError = false;
            if(app.password != app.confirmPassword){
              app.errorMessage = "两次输入密码不一致!"
              app.hasError = true;
              return;
            }
            let data = {
              'InviteCode': app.InviteCode,
              'phone': app.phone,
              'nickname': app.nickname,
              'password': app.password
            };
          console.log(data);
          $.ajax({
              url: '/api/v1/users/student/register',
              data: data,
              type: 'post',
              dataType: 'json',
              success:function (json) {
                if(json.state==2000){
                  alert("注册成功!")
                }else {
                  // alert(json.message)
                  app.errorMessage = json.message;
                  app.hasError = true;
                }
              }
            })
        }
    }
  });
</script>
</body>
</html>
